<template>
  <div class="sidebar">
    <ul>
      <li :class="{ active: chapterFlag }" @click="handleChapter">
        <span class="el-icon-tickets"></span>
        <p>章节</p>
      </li>
      <li @click="handleClick(2)">
        <span class="el-icon-tickets"></span>
        <p>问答</p>
      </li>
      <li @click="handleClick(3)">
        <span class="el-icon-tickets"></span>
        <p>评论</p>
      </li>
      <li @click="handleClick(4)">
        <span class="el-icon-tickets"></span>
        <p>笔记</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      qaShow: false,
      noteShow: false,
    }
  },
  props: ['showRight', 'chapterFlag'],

  mounted() {},
  methods: {
    handleChapter() {
      this.$emit('changeChapterFlag')
    },
    handleClick(type) {
      this.$bus.$emit('showCourseRight', type)
    },
  },
}
</script>
<style scoped lang="scss">
.sidebar {
  width: 100%;
  height: 100%;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    li {
      width: 100%;
      padding: 10px 0;
      text-align: center;
      color: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      &.active,
      &:hover {
        color: rgba(255, 255, 255, 0.8);
        background: #26292c;
      }
      span {
        font-size: 22px;
      }
      p {
        font-size: 12px;
      }
    }
  }
}
</style>